<html>
<!--/*-->
<!-- * jquery.flickrutils.js-->
<!-- *-->
<!-- * Copyright (C) 2009 - Antonio Perez-Aranda Alcaide ant30tx@gmail.com-->
<!-- *-->
<!-- * <program name> is free software; you can redistribute it and/or modify-->
<!-- * it under the terms of the GNU General Public License as published by-->
<!-- * the Free Software Foundation; either version 2 of the License, or-->
<!-- * (at your option) any later version.-->
<!-- *-->
<!-- * <program name> is distributed in the hope that it will be useful,-->
<!-- * but WITHOUT ANY WARRANTY; without even the implied warranty of-->
<!-- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the-->
<!-- * GNU General Public License for more details.-->
<!-- *-->
<!-- * You should have received a copy of the GNU General Public License-->
<!-- * along with <program name>; if not, write to the Free Software-->
<!-- * Foundation, Inc., 51 Franklin St, Fifth Floor, -->
<!-- * Boston, MA  02110-1301  USA-->
<!-- */-->
<!-- -->

<head>

    


<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 // Load jQuery
  google.load("jquery", "1.3.2", {uncompressed:true});
  google.load("jqueryui", "1.5.3", {uncompressed:true});
  
  // on page load complete, fire off a jQuery json-p query
  // against Google web search
  google.setOnLoadCallback(function() {
    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&v=1.0&callback=?",

      // on search completion, process the results
      function (data) {
        if (data.responseData.results &&
            data.responseData.results.length > 0) {
          var results = data.responseData.results;
        }
        
      });
    });
</script>

<script src="js/jquery.flickrutils.js" type="text/javascript"></script>
<link href="css/jquery.flickrutils.css" media="screen, projection" rel="stylesheet" type="text/css" />


</head>

<style>
/* RESET CSS BY: http://davidwalsh.name/reset-css */

/*  all media  */
  /* global */
  * { margin:0;
      padding:0
  }
  body {
    background:#fff;
    padding:15px 0 30px 0;
    font:11px sans-serif;
  }

  /* tags */
  h1 {
    padding:0 0 15px 10px;
  }

  h2 {
    padding:5px 0 15px 10px;
  }

  label,
  select {
    cursor:pointer;
  }

  li {
    line-height:15px;
    margin:5px 0 0 0;
    list-style-type: none;
  }
  ol,
  ul {
    padding:0 0 10px 15px;
  }
  p {
    line-height:15px; padding:0 0 10px 0;
  }
  textarea,
  input {
    font:11px sans-serif;
    padding:2px;
  }

  /* custom */
  .clear {
    clear:both;
  }
  .input {
    border:2px solid #ccc;
    padding:2px;
  }
  .page-break,
  .print-only {
     display:none;
  }
  .point {
    cursor:pointer;
  }

  /* links */
  a                { color:inherit; }
  a:link, a:visited      { color:#00f; text-decoration:underline; }
  a:hover, a:active      { color:#00f; text-decoration:none; }
  a img              { border:0; }

/*  print media  */
@media print
{
  /* global */
  body        { color:#000; font-size:9pt; }

  /* layout */
  #wrap            { width:600px; }

  /* custom */
  .print-only          { display:block; }
  .page-break          { page-break-before:always; }

  /* links */
  a          { text-decoration:underline; color:#999; }
  

}


</style>

<body>


<div>
    <h1>jquery.flickrlist demo</h1>

    <h2>Input field</h2> 
    <p>When you click in input, a flickr browser will be opened</p>
    <p>A example code to prepare the input field</p>
<textarea cols="60" rows=3 >
$(document).ready(function(){
    $("input[name=result]").flickrpicker();
});
</textarea>
    <div><label>Input Field</label>
        <input type="text" name="result" value="3154251101,3154255229"/>
    </div>


    <div class="clear"></div>
    <hr/>
    <h2>Load Images from list (input value) </h2>
    <p>A example code to prepare images from input</p>
<textarea cols="60" rows=6 >
$(document).ready(function(){
    $("input[name=loadimages]").click(function(){
        photo_ids = $("input[name=result]").attr("value");
        $(".loadimages").loadflickrimageslist({photo_ids:photo_ids});
    });
});
</textarea>
    <div>
        <p>Click to button to load photos from input</p>
        <input type="button" name="loadimages" value="Load Images"/>
        <div class="loadimages"></div>
    </div>


    <div class="clear"></div>     
    <hr/>
    <h2>Autoloading image from flickr id on rel in a link item</h2>
    <p>Search class flickrimage and take rel attr</p>
<textarea cols="60" rows=5 >
$(document).ready(function(){
    $("a.flickrimage").loadflickrimage();
});
</textarea>        
    <div> 
    <a class="flickrimage" href="" rel="3154251101"></a>
    </div>



    <div class="clear"></div>     
    <hr/>
    <h2>Autoloading all images class flickrid, id</h2>

<p>Search links with class "flickrid id"</p>
<p>If you has class "raw", the href of link is a large image size</p>
<textarea cols="60" rows=5 >
$(document).ready(function(){
    $(document).loadflickrallimages();
});
</textarea>        


    <h3>Images with link to flickr image view</h3>
    <div> 
    <a class="flickrid 3154251101" href=""></a>
    <a class="flickrid 3154251101" href=""></a>
    <a class="flickrid 3154255229" href=""></a>
    </div>
    <br/>
    <h3>Images with link to flickr large raw image</h3>
    <div> 
    <a class="flickrid raw 3154251101" href=""></a>
    <a class="flickrid raw 3154251101" href=""></a>
    <a class="flickrid raw 3154255229" href=""></a>
    </div>


  
</div>

</body>
<script language="javascript">

$(document).ready(function(){
    $("input[name=result]").flickrpicker();
    
    $("input[name=loadimages]").click(function(){
        photo_ids = $("input[name=result]").attr("value");
        $(".loadimages").loadflickrimageslist({photo_ids:photo_ids});
    });
    
    $("a.flickrimage").loadflickrimage();
});

$(document).ready(function(){
    $(document).loadflickrallimages();
});



</script>
</html>
